<template>
    <div>
        <Tabcomponent></Tabcomponent>
        <div class="articulars">
            <div>
                女士/服饰/
                <span>上衣</span>
            </div>
            <div class="detailpicture">
                <!--商品轮播-->
                <div class="picture-left">
                    <el-carousel height="525px" direction="vertical" :autoplay="false">
                        <el-carousel-item v-for="item in 3" :key="item">
                        <h3 class="medium">{{ item }}</h3>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <!--商品信息&加入购物车-->
                <div class="picture-rigth">
                    <div class="div1">VERSACE</div>
                    <div class="div2"> 高腰收腰时尚短衫</div>
                    <div class="div3">￥8, 000</div>
                    <div class="div4">颜色：黑色</div>
                    <div class="div5">
                        <div v-for="(item,index) in 4" :key="index" @click="pitchon(index)" :style="colourid==index?'':'background: #000;'">
                            <span v-if="colourid==index" style="background: #000;"></span>
                        </div>
                    </div>
                    <div class="yardage">
                        <span>尺码：国际码</span>
                        <div>
                            <div @click="sizechartisshow=!sizechartisshow">
                                <span class="yardage-text">选择尺码</span>
                                <div class="icon">
                                    <i class="iconfont icon-shang1"></i>
                                </div>
                            </div>
                            <ul class="sizechart" v-if="sizechartisshow">
                                <li class="sizechart-item" v-for="(item,index) in 4" :key="index">XL</li>
                            </ul>                   
                        </div>
                    </div>
                    <div class="addtocart">
                        <button>加入购物车</button>
                        <button><i class="iconfont icon-xin1"></i></button>
                    </div>
                    <div class="div6">
                        <span @click="guideShow=true">尺码指南</span><span class="iconfont icon-zuoqianjin"></span>
                        <Modalbox v-if="guideShow">
                            <Sizeguide @guideIsshow='guideIsshow'></Sizeguide>
                        </Modalbox>
                    </div>
                </div>
            </div>
            <!--商品相关信息-->
            <div class="goods">
                <ul>
                    <li style="font-weight: 800; margin-bottom: 6px;">安心下单</li>
                    <li>· 满额享定额运费</li>
                    <li>· 100%正品直邮 </li>
                    <li>· 14天无理由免费退货</li>
                    <li>关税- -并退还</li>
                    <div>了解详情</div>
                </ul>
                <ul>
                    <li style="font-weight: 800; margin-bottom: 6px;">清关无忧</li>
                    <li>· 我们护驾</li>
                    <li>· 清关无忧 </li>
                    <li>· 为确保您的商品能顺利清关，请在下单后的订单确认页面上传您的身份信息。</li>
                    <div>了解详情</div>
                </ul>
                <ul>
                    <li style="font-weight: 800; margin-bottom: 6px;">品牌故事</li>
                    <li>·maxsoo旗下品牌</li>
                    <li>:CHOCOOLATE 是 2006 年创立的年轻品牌，以“mass”与“prestige”的结合为核心理念，坚持将简约而精致的生活追求融入到服饰设计中，打造出玩味有趣的“masstige”独特风格，开启时尚新可能。 </li>
                </ul>
                <ul>
                    <li style="font-weight: 800; margin-bottom: 6px;">贴心专送</li>
                    <li>所有商品免配送费，并受我们的退货政策所保护。由顺丰提供标准配送服务，即发货日起 3 至 5 个工作日内送达，法定节假日除外。</li>
                </ul>
            </div>
            <!--大家都在看-->
            <Alllooking></Alllooking>
        </div>
    </div>
</template>

<script>
import Tabcomponent from '@/components/Tabcomponent.vue'
import Modalbox from '@/components/Modalbox.vue'
import Sizeguide from '@/components/Sizeguide.vue'
import Alllooking from '@/components/Alllooking.vue'
export default {
    components: {
        Tabcomponent,
        Modalbox,
        Sizeguide,
        Alllooking
    },
    data() {
        return {
            colourid: 0,
            sizechartisshow: false,
            guideShow: false
        }
    },
    methods: {
        pitchon(i) {
            this.colourid = i
        },
        guideIsshow(a) {
            console.log(a)
            this.guideShow = a
        } 
    },
}
</script>

<style lang="scss">
.articulars {
    width: 1209px;
    padding-top: 165px;
    >div:nth-child(1) {
        font-size: 14px;
        font-weight: 600;
        padding-top: 50px;
        padding-left: 66px;
        >span {
            font-weight: 400;
        }
    }
   
}
.detailpicture {
    width: 1209px;
    // height:525px;
    margin-top: 48px;
    // position: relative;
    overflow: hidden;
    .picture-left {
        float: left;
        width: 661px;
    }
    .picture-rigth {
        background: #fff;
        float: left;
        // position: absolute;
        // right: 0px;
        // top: 283px;
        margin-left: 62px;
        padding-top: 80px;
        >.div1 {
            font-size: 28px;
            font-weight: 800;
        }
        >.div2 {
            font-size: 20px;
            margin-top: 20px;
        }
        >.div3 {
            font-size: 20px;
            font-weight: 800;
            margin-top: 20px;
        }
        >.div4{
            font-size: 14px;
            margin-top: 20px;
        }
        >.div5 {
            overflow: hidden;
            margin-top: 20px;
            >div {
                width: 28px;
                float: left;
                height: 28px;
                border: 2px solid #000;
                border-radius: 50%;
                text-align: center;
                line-height: 32px;
                position: relative;
                margin-right: 4px;
                cursor: pointer;
                >span {
                    display: inline-block;
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-left: -12px;
                    margin-top: -12px;
                }
            }
        }
        >.yardage {
            margin-top: 32px;
            width: 362px;
            >span {
                font-size: 14px;
            }
            >div {
                margin-top: 10px;
                border: 1px solid #000;
                line-height: 48px;
                position: relative;
                >div {
                    >.yardage-text {
                        padding-left: 29px;
                    }
                    .icon {
                        width: 36px;
                        height: 48px;
                        font-size: 26px ;
                        line-height: 48px;
                        border-left: 1px solid #000;
                        text-align: center;
                        position: absolute;
                        right: 0;
                        top: 0;
                        >i {
                            display: inline-block;
                            transform: rotate(180deg)
                        }
                    }
                }
                >.sizechart {
                    position: absolute;
                    top: 48px;
                    left: -1px;
                    width: 100%;
                    border: 1px solid #000;
                    border-top:none ;
                    z-index: 22;
                    background: #fff;
                    >.sizechart-item {
                        line-height: 48px;
                        padding-left: 29px;
                        border-top: 1px solid #000;
                    }
                }
            }
        }
        .addtocart {
            width: 362px;
            position: relative;
            margin-top: 15px;
            >button:nth-child(1) {
                width: 303px;
                height: 48px;
                color: #fff;
                background: #000;
                outline: none;
            }
            >button:nth-child(2) {
                width: 50px;
                height: 48px;
                background: #000;
                color: #fff;
                outline: none;
                position: absolute;
                right: 0;
                >i {
                    font-size: 24px;
                }
            }
        }
        .div6 {
            margin-top: 14px;
            position: relative;
            >span:nth-child(1) {
                font-size: 14px;
                cursor: pointer;
            }
            >span:nth-child(2) {
                font-size: 18px;
                margin-left: 4px;
                position: absolute;
                top: 2px;
            }
        }
    }
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
.el-carousel__indicators--vertical {
    left: 0;
}
.el-carousel__indicator--vertical .el-carousel__button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.goods {
    // width: 100%;
    background: #ddd;
    height: 294px;
    margin-top: 42px;
    padding-left: 81px;
    overflow: hidden;
    >ul {
        padding-top: 40px;
        width: 220px;
        float: left;
        margin-right: 50px;
        >li {
            font-size: 14px;
            line-height: 24px;
        }
        >div {
            display: inline-block;
            font-size: 14px;
            margin-top: 30px;
            cursor: pointer;
        }
    }
}
</style>